<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>付款界面</title>
    <link rel="stylesheet" href="css/index.css">
    <script type="text/javascript" src="js/jquery.min.js"></script>
    <script type="text/javascript" src="js/jquery.min.js"></script>
    <script type="text/javascript" src="js/jquery-3.1.1.min.js"></script>
</head>

<body>
<!--header-->
<div class="header2">
    <div class="header-box">
        <div class="header">
            <div class="header-left-title">
                <div class="welcome"><img  class="icon" src="images/icon/welcome.png" alt="">&nbsp;欢迎来到<a href="">AnJunDCM官网</a>!</div>
                <div class="login">&nbsp;&nbsp;&nbsp;<a href="login.html">登陆</a>&nbsp;丨&nbsp;<a href="reg.html">免费注册</a></div>
            </div>
            <div class="header-center-title">
                <ul>
                    <li><a href="">我的AnJun</a></li>
                    <li><a href="cart.html">购物车</a><span class="count">1</span></li>
                    <li><a href="">我的订单</a></li>
                    <li><a href="">收藏网站</a></li>
                    <li><a href="">积分</a></li>
                </ul>
            </div>
            <div class="header_right_title">
                <ul>
                    <li><a href="">我要供货</a></li>
                    <li><a href="">客服中心<i class="kefu-icon"><img src="images/kefu.png" alt="" width="20" height="20"></i></a></li>

                </ul>

            </div>


        </div>
        <div class="header-nav-box">
            <div class="nav">
                <div class="nav-logo">
                    <a href="" class="logo"><img src="images/logo.png" alt=""></a>
                </div>
                <div class="nav-search-box">
                    <form action="" name="fomr1">
                        <div class="nav-search">
                            <div class="bar1">
                                <input type="text" placeholder="请输入您要搜索的内容..." class="text"><button type="submit" class="btn">搜索</button>
                            </div>
                            <div class="search-key">
                                <span class="key-title">热搜词汇:</span>
                                <div class="key">
                                    <ul>
                                        <li><a href="">手机</a></li>
                                        <li><a href="">电子产品</a></li>
                                        <li><a href="">衣服</a></li>
                                        <li><a href="">鞋子</a></li>
                                        <li><a href="">鞋子</a></li>
                                        <li><a href="">鞋子</a></li>
                                        <li><a href="">鞋子</a></li>
                                        <li><a href="">鞋子</a></li>
                                        <li><a href="">鞋子</a></li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                    </form>
                </div>
                <div class="wechat-box">
                    <ul>
                        <li><img src="images/app.jpg" alt="" width="110" height="110"></li>
                        <li><img src="images/app.jpg" alt="" width="110" height="110"></li>
                    </ul>
                </div>

            </div>
            <div class="nav-daohang">
                <div class="daohang">
                    <ul>
                        <li><a href="goods.html">全部分类</a></li>
                        <li><a href="index.html">首页</a></li>
                        <li><a href=""> 选品采购</a></li>
                        <li><a href="daigou.html">指定代购</a></li>
                        <li><a href="need.html"> 需求提交</a></li>
                        <li><a href="">个性定制</a></li>
                        <li><a href="wl-case.html">物流方案</a></li>
                        <li><a href="join.html">我要入驻</a></li>
                        <li><a href="us.html">关于我们</a></li>
                    </ul></div>
            </div>

        </div>
    </div></div>
<!--hearder end!-->


<!--cart-->

<div class="cart-box" style="height: 700px;">

    <div class="cart-buzhou">
        <img src="images/cart-move3.jpg" alt="">

    </div>

    <div class="cart">
        <div class="cart3-pay-title">
<span><img src="images/icon/config.png" alt="" width="50" height="50">&nbsp;&nbsp;&nbsp;&nbsp;您的订单提交成功,请在10分钟内尽快付款，以免订单失效！</span>
        </div>
        <div class="cart3-order">
                <span>订单编号：1000000020200519&nbsp;&nbsp;|&nbsp;&nbsp;应付金额&nbsp;<a>5499.00</a>&nbsp;元</span>
        </div>
        <p align="center" id="time-out">支付剩余时间：<span>6</span><span>0</span><span>0</span>秒&nbsp;&nbsp;<span><a href="pay-ok.html">已完成支付?</a></span></p>

    </div>
    <div class="cart3-pay-type">
<div class="type-title">
<ul id="list">
    <li id="ic-card">银行卡/储蓄卡</li>
    <li id="pay-card">信用卡</li>
    <li id="wechat">微信支付</li>
    <li id="ali-pay">支付宝支付</li>
</ul>
</div>
<div class="type-content" ID="tb1">
<p><img src="images/icon/right.png" alt="" width="15" height="15">&nbsp;选择银行卡支付</p>
<p>
    <ul class="type-chose" >
    <li><span><label><input type="radio" value="radiobutton" name="radiobutton"></span><img src="images/beijing.png" alt="" ></label></li>
    <li><span><label><input type="radio" value="radiobutton" name="radiobutton"></label></span><span><img src="images/jianshe.png" alt="" ></span></li>
    <li><span><input type="radio" value="radiobutton" name="radiobutton"></span><span><img src="images/nongye.png" alt="" ></span></li>
    <li><span><input type="radio" value="radiobutton" name="radiobutton"></span><span><img src="images/huaxia.png" alt="" ></span></li>
    <li><span><input type="radio" value="radiobutton" name="radiobutton"></span><span><img src="images/nongye.png" alt="" ></span></li>
    <li><span><input type="radio" value="radiobutton" name="radiobutton"></span><span><img src="images/huaxia.png" alt="" ></span></li>
    <li><span><input type="radio" value="radiobutton" name="radiobutton"></span><span><img src="images/beijing.png" alt="" ></span></li>
    <li><span><input type="radio" value="radiobutton" name="radiobutton"></span><span><img src="images/jianshe.png" alt="" ></span></li>
    <li><span><input type="radio" value="radiobutton" name="radiobutton"></span><span><img src="images/nongye.png" alt="" ></span></li>
    <li><span><input type="radio" value="radiobutton" name="radiobutton"></span><span><img src="images/jianshe.png" alt="" ></span></li>
</ul>

</p>
</div>

        <div class="type-content" ID="tb2">
            <p><img src="images/icon/right.png" alt="" width="15" height="15">&nbsp;选择信用卡支付</p>
            <p>
            <ul class="type-chose" >
            <li><span><input type="radio" value="radiobutton" name="radiobutton"></span><span><img src="images/beijing.png" alt="" ></span></li>
            <li><span><input type="radio" value="radiobutton" name="radiobutton"></span><span><img src="images/jianshe.png" alt="" ></span></li>
            <li><span><input type="radio" value="radiobutton" name="radiobutton"></span><span><img src="images/nongye.png" alt="" ></span></li>
            <li><span><input type="radio" value="radiobutton" name="radiobutton"></span><span><img src="images/huaxia.png" alt="" ></span></li>
            <li><span><input type="radio" value="radiobutton" name="radiobutton"></span><span><img src="images/nongye.png" alt="" ></span></li>
            <li><span><input type="radio" value="radiobutton" name="radiobutton"></span><span><img src="images/huaxia.png" alt="" ></span></li>
            <li><span><input type="radio" value="radiobutton" name="radiobutton"></span><span><img src="images/beijing.png" alt="" ></span></li>
            <li><span><input type="radio" value="radiobutton" name="radiobutton"></span><span><img src="images/jianshe.png" alt="" ></span></li>
            <li><span><input type="radio" value="radiobutton" name="radiobutton"></span><span><img src="images/nongye.png" alt="" ></span></li>
            <li><span><input type="radio" value="radiobutton" name="radiobutton"></span><span><img src="images/jianshe.png" alt="" ></span></li>
            <li>22222222222222222222</li>
            </ul>

            </p>
        </div>

        <div class="type-content" ID="tb3">
            <img src="images/wechat-pay.png" alt="" >

        </div>

        <div class="type-content" ID="tb4">
            <img src="images/ali-pay.png" alt="" >
        </div>

    </div>

</div>

<!--cart end!-->

<!--footer-->
<div class="footer-box" >
    <div class="footer-list-box">
        <div class="footer-list">
            <ul><img src="images/icon/about.png" alt="" width="20" height="20">&nbsp;关于我们
                <li class="magin"><a href="">关于安骏</a></li>
                <li><a href="">产品服务</a></li>
                <li><a href="">联系我们</a></li>
                <li><a href="">企业文化</a></li>
            </ul>
        </div>

        <div class="footer-list">
            <ul><img src="images/icon/zhinan.png" alt="" width="20" height="20">&nbsp;新手指南
                <li class="magin"><a href="">新手福利</a></li>
                <li><a href="">推荐有奖</a></li>
                <li><a href="">会员中心</a></li>
                <li><a href="">我的积分</a></li>
                <li><a href="">客服中心</a></li>
            </ul>
        </div>

        <div class="footer-list">
            <ul><img src="images/icon/zhifu.png" alt="" width="20" height="20">&nbsp;支付方式
                <li class="magin"><a href="">支付宝</a></li>
                <li><a href="">WeChat</a></li>
                <li><a href="">前海支付</a></li>
                <li><a href="">银联支付</a></li>
                <li><a href="">其它支付</a></li>
            </ul>
        </div>

        <div class="footer-list">
            <ul><img src="images/icon/daohang.png" alt="" width="20" height="20">&nbsp;网站导航
                <li class="magin"><a href="">选品采购</a></li>
                <li><a href="">指定代购</a></li>
                <li><a href="">需求提交</a></li>
                <li><a href="">我要入驻</a></li>
                <li><a href="">系统登录</a></li>
            </ul>
        </div>

        <div class="footer-list">
            <ul><img src="images/kefu.png" alt="" width="20" height="20">&nbsp;客服电话：
                <li class="magin" id="phone"><a href="">0755-12345678</a></li>
                <li><a href="">地址：深圳市龙岗区坂田街道格泰隆工业园</a></li>
                <li><a href="">邮箱：123456789@qq.com</a></li>

            </ul>
        </div>

        <div class="footer-list" style="margin-left: 100px;">
            <ul><img src="images/app.jpg" alt="" width="150" height="150">
                <li class="magin" id="guanzhu"><a href="">关注安骏</a></li>

            </ul>
        </div>


    </div>
    <div class="footer-footer">
        © 2020-2020 AnJun DCM  All Rights Reserved 9.0 备案号：123456789

    </div>

</div>
<!--footer end!-->



<!--点击标签显示对应content/js-->
<script type="text/javascript">
    $("#ic-card").click(function(){
        $("#tb1").show(800);
        $("#tb2").hide();
        $("#tb3").hide();
        $("#tb4").hide();
    });
    $("#pay-card").click(function(){
        $("#tb2").show(800);
        $("#tb1").hide();
        $("#tb3").hide();
        $("#tb4").hide();

    });
    $("#wechat").click(function(){
        $("#tb3").show(800);
        $("#tb1").hide();
        $("#tb2").hide();
        $("#tb4").hide();
    });
    $("#ali-pay").click(function(){
        $("#tb4").show(800);
        $("#tb1").hide();
        $("#tb2").hide();
        $("#tb3").hide();
    });

    /*点击标签，背景色改变*/
    $('#list li').on('click',function(e){
        event.preventDefault();
        $(this).css('background','#fff').siblings().css('background','#fafafa');

    });



</script>


</body>
</html>